<template>
    <div class="flex justify-center index  bg-[#F6F7FB] overauto"
         style="width: 100vw;height: 100vh;overflow-x: hidden;">
      <div class="content">
        <div class="relative topbg">
          <div class="back-title">
            <div class="relative back-box">
              <div class="absolute pt-[12PX] pl-[15PX] back-icon " @click="goBack">
                <el-icon>
                  <ArrowLeftBold size="16"/>
                </el-icon>
              </div>
              <div class="back-title-text text-[16PX] text-center pt-[6PX]">

              </div>
            </div>
          </div>

          <div class="text-[22PX] text-[#333] font-bold flex-center">
            {{  getLanguage(props.product.language).orderQuery  }}
          </div>

          <div class="mt-[15PX] px-[15PX]">
            <el-input :placeholder="getLanguage(props.product.language).inputOrderNo" v-model="orderNo">
              <template #prefix>
                <Icon icon="ep:search" size="14" color="#333"/>
              </template>

              <template #suffix>
                <div @click="search">{{  getLanguage(props.product.language).search  }}</div>
              </template>
            </el-input>
          </div>


          <div class="mt-[15PX]" v-if="orderData.orderNo">
            <div class="bg-[#fff] px-[16PX] py-[19PX] info" style="border-radius: 20PX 20PX 0 0 ;">

              <div class="rounded-[15PX] bg-[#fff]">
                <div class="text-[16PX] text-[#333] font-bold mb-[15PX]">{{  getLanguage(props.product.language).orderNo  }}：{{  orderNo  }}</div>
                <div class="line w-[100%] h-[1PX] mb-[15PX]"
                     style="border-bottom: 1px dashed rgb(221, 221, 221);"></div>
              </div>

              <div class="text-[16PX] font-bold mb-[12PX]">
                {{ getLanguage(props.product.language).productInfo }}
              </div>
              <div>
                <div class="flex items-center justify-between mb-[12PX] infos"
                     v-for="(item,index) in orderData.detailList" :key="index">
                  <div class="flex items-center left">
                    <div class="w-[96PX] h-[96PX] rounded-[14PX] mr-[12PX] imgbox">
                      <img class="w-full h-full object-cover" :src="item.picture" alt=""/>
                    </div>
                    <div class="flex h-[96PX] py-[9PX] flex-col  info-right">
                      <div class="text-[14PX] text-[#333] font-medium">{{
                          item.productName
                        }}
                      </div>
                      <div class="text-[12PX] mt-auto text-[#999]">{{ item.propertyNameForeign }}</div>
                      <!-- <div class="text-[14PX] mt-auto text-[#333] font-semibold">{{orderInfo.currencySymbol}} {{ item.discountedPrice }}</div> -->
                    </div>
                  </div>
                  <div class="text-[12PX] text-[#999] right">
                    x{{ item.number }}
                  </div>
                </div>
              </div>
              <div class="my-[18PX] w-full h-[1PX] line" style="border-bottom:1px dashed #ddd"></div>
              <div>
                <div class="flex items-center justify-between py-[5PX]  items">
                  <div class="text-[14PX] text-[#333] label">
                    {{ getLanguage(props.product.language).productTotalPrice }}
                  </div>
                  <div class="val text-[14PX] text-[#999]">{{ orderInfo.currencySymbol }}
                    {{ orderInfo.priceInfo?.price }}
                  </div>
                </div>
                <!--              <div class="flex items-center justify-between py-[5PX]  items">-->
                <!--                <div class="text-[14PX] text-[#333] label">-->
                <!--                  {{ getLanguage(props.product.language).shippingFee }}-->
                <!--                </div>-->
                <!--                <div class="val text-[14PX] text-[#999]">{{ orderInfo.currencySymbol }}-->
                <!--                  {{ orderInfo.priceInfo?.shippingFee || 0 }}-->
                <!--                </div>-->
                <!--              </div>-->
                <!--              <div class="flex items-center justify-between py-[5PX]  items"-->
                <!--                   v-if="orderInfo.priceInfo?.commission">-->
                <!--                <div class="text-[14PX] text-[#333] label">-->
                <!--                  {{ getLanguage(props.product.language).commission }}-->
                <!--                </div>-->
                <!--                <div class="val text-[14PX] text-[#999]">{{ orderInfo.currencySymbol }}-->
                <!--                  {{ orderInfo.priceInfo?.commission || 0 }}-->
                <!--                </div>-->
                <!--              </div>-->
                <!--              <div class="flex items-center justify-between py-[5PX]  items"-->
                <!--                   v-if="orderInfo.priceInfo?.remotePostage">-->
                <!--                <div class="text-[14PX] text-[#333] label">-->
                <!--                  {{ getLanguage(props.product.language).remotePostage }}-->
                <!--                </div>-->
                <!--                <div class="val text-[14PX] text-[#999]">{{ orderInfo.currencySymbol }}-->
                <!--                  {{ orderInfo.priceInfo?.remotePostage || 0 }}-->
                <!--                </div>-->
                <!--              </div>-->
                <!--              <div class="flex items-center justify-between py-[5PX]  items"-->
                <!--                   v-if="orderInfo.priceInfo?.lessPrice">-->
                <!--                <div class="text-[14PX] text-[#333] label">-->
                <!--                  {{ getLanguage(props.product.language).discount }}-->
                <!--                </div>-->
                <!--                <div class="val text-[14PX] text-[#FD4442]">- {{ orderInfo.currencySymbol }}-->
                <!--                  {{ orderInfo.priceInfo?.lessPrice || 0 }}-->
                <!--                </div>-->
                <!--              </div>-->
                <div class="flex items-center justify-between  py-[5PX] items">
                  <div class="label"></div>
                  <div class="val text-[14PX] text-[#333] font-bold">
                    {{ getLanguage(props.product.language).actualPayment }}
                    {{ orderData.currencySymbol }} {{ orderData?.orderAmount }}
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full h-[10PX] bg-[#f5f5f5] splitblock"></div>
            <div class="px-[16PX] bg-[#fff] pt-[10PX] py-[10PX] orderbox">
              <div class="flex justify-between items-center  py-[5PX] items">
                <div class="text-[14PX] text-[#333] label">
                  {{ getLanguage(props.product.language).orderNo }}：
                </div>
                <div class="text-[14PX] text-[#333] font-medium flex items-center val">
                  {{ orderNo }}
                  <div
                    class="text-[12PX] ml-[12PX] bg-[#f5f5f5] px-[10PX] py-[3PX] cursor-pointer rounded-[40PX] btn"
                    v-copyText="orderInfo.orderId">{{ getLanguage(props.product.language).copy }}
                  </div>
                </div>
              </div>
              <div class="flex justify-between items-center  py-[5PX] items">
                <div class="text-[14PX] text-[#333] label">
                  {{ getLanguage(props.product.language).orderTime }}：
                </div>
                <div class="text-[14PX] text-[#333] font-medium val">
                  {{ dayjs(orderData.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </div>
              </div>
              <!--            <div class="flex justify-between items-center  py-[5PX] items">-->
              <!--              <div class="text-[14PX] text-[#333] label">-->
              <!--                {{ getLanguage(props.product.language).payMethod }}：-->
              <!--              </div>-->
              <!--              <div class="text-[14PX] text-[#333] font-medium val">-->
              <!--                {{ getLanguage(props.product.language).deliveryPay }}-->
              <!--              </div>-->
              <!--            </div>-->
              <!--            <div class="my-[18PX] w-full h-[1PX] line" style="border-bottom:1px dashed #ddd"></div>-->
              <!--            <div class="flex justify-between items-center  py-[5PX] items">-->
              <!--              <div class="text-[14PX] text-[#333] label">-->
              <!--                {{ getLanguage(props.product.language).logisticsMethod }}：-->
              <!--              </div>-->
              <!--              <div class="text-[14PX] text-[#333] font-medium val">{{-->
              <!--                  orderInfo.logisticsMethodName-->
              <!--                }}-->
              <!--              </div>-->
              <!--            </div>-->
              <!--            <div class="flex justify-between items-center  py-[5PX] items">-->
              <!--              <div class="text-[14PX] text-[#333] label">-->
              <!--                {{ getLanguage(props.product.language).sendInfoAndAddress }}：-->
              <!--              </div>-->
              <!--              <div class="text-[14PX] font-medium val">-->
              <!--                <div class="text-right text-[#333]">{{ orderInfo.customerName }}-->
              <!--                  {{ orderInfo.customerPhone }}-->
              <!--                </div>-->
              <!--                <div class="text-[#999]">{{ orderInfo.area }}{{ orderInfo.areaName }}{{-->
              <!--                    orderInfo.cityName-->
              <!--                  }}{{ orderInfo.detailAddress }}-->
              <!--                </div>-->

              <!--              </div>-->
              <!--            </div>-->
            </div>
          </div>

          <div v-else class="mt-[15PX]">
            <div class="bg-[#fff] px-[16PX] py-[19PX] info rounded-[8PX]">
              <el-empty :description="getLanguage(props.product.language).noOrderData" />
            </div>

          </div>


<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.onlineService">-->
<!--            {{ getLanguage(props.product.language).serverLine }}: <span-->
<!--            class="text-[#FD4442]">{{ product.onlineService }}</span>-->
<!--          </div>-->
<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.messengerContact">-->
<!--            {{ getLanguage(props.product.language).serverMessenger }}: <span-->
<!--            class="text-[#FD4442]">{{ product.messengerContact }}</span>-->
<!--          </div>-->
<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.instagramContact">-->
<!--            {{ getLanguage(props.product.language).serverInstagram }}: <span-->
<!--            class="text-[#FD4442]">{{ product.instagramContact }}</span>-->
<!--          </div>-->
<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.whatsappContact">-->
<!--            {{ getLanguage(props.product.language).serverWhatsApp }}: <span-->
<!--            class="text-[#FD4442]">{{ product.whatsappContact }}</span>-->
<!--          </div>-->
<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.email">-->
<!--            {{ getLanguage(props.product.language).serverEmail }}: <span-->
<!--            class="text-[#FD4442]">{{ product.email }}</span>-->
<!--          </div>-->
<!--          <div class="text-center py-[4PX] text-[#333] kf" v-if="product.phone">-->
<!--            {{ getLanguage(props.product.language).serverPhone }}: <span-->
<!--            class="text-[#FD4442]">{{ product.phone }}</span>-->
<!--          </div>-->

        </div>
      </div>
    </div>

</template>
<script lang="ts" setup>
import {FormInstance} from 'element-plus'
import {useMessage} from "@/hooks/web/useMessage";
import {ArrowLeftBold} from '@element-plus/icons-vue'
import {ArrowDown} from '@element-plus/icons-vue'
import {ArrowUp} from '@element-plus/icons-vue'
import {getLanguage} from "@/utils/langue";
import dayjs from 'dayjs'
import {spmFaceBook} from "@/utils";

import {getOrder} from "@/api/h5";




const message = useMessage();
const props = defineProps({
  isPlaceAnOrder: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  areaInfo: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  skuInfo: {
    type: Array,
    required: false,
    default: () => []
  },
  hasProvince: {
    type: Boolean,
    default: true,
  },
  //原商品列表sku
  originalSku: {
    type: Array,
    required: false,
    default: () => []
  },
  provinceList: {
    type: Array,
    required: false,
    default: () => []
  },
  logisticsList: {
    type: Array,
    required: false,
    default: () => []
  },
  storeList: {
    type: Array,
    required: false,
    default: () => []
  },
  globalConfig: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  isPickup: {
    type: Boolean,
    default: false
  },
  remoteList: {
    //偏远地区列表
    type: Array,
    default: () => []
  },
  orderInfo: {
    type: Object,
    default: () => {
    }
  }
});

const orderData = ref({})

const orderNo = ref("")

const formRef = ref<FormInstance>()

const isRemote = ref(false)

const emit = defineEmits(['confirm', 'execute', 'update:showOrder']);


const search = async () => {
  //根据订单号查询订单
  if (!orderNo.value) {
    useMessage().error(getLanguage(props.product.language).inputOrderNo)
    return
  }

  let res = await getOrder({
    orderNo: orderNo.value
  })

  orderData.value = res||{}

}

const goBack = () => {
  emit('update:showOrder', false)
}
</script>
<style>
</style>
<style scoped lang="less">
.commonBorder {
  border: 1PX solid #dedede;
  border-radius: 12PX;
}

.activeBorder {
  border: 1PX solid #FF3400;
  border-radius: 12PX;
}

.topbg {
  background: url("@/assets/template/successbg.png") no-repeat right top;
  background-size: 298PX 191PX;
}

.back-title {
  width: 100%;
  height: 42PX;
  // background-color: #fff;
}

.back-title-text {
  img {
    width: 7PX;
    height: 7PX;
  }

  span, p {
    color: #073064;
    font-size: 7PX;
  }
}


:deep(.el-form-item__label) {
  font-size: 14PX;
  height: 30PX;
}


@import "@/common";

.index {
  .content {
    width: 640PX;
    height: 100%;

    .top-title {
      font-size: 14PX !important;

      .btn-promotion {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6PX;
        width: 40PX;
        line-height: 40PX;
        height: 18PX;
        background: #FFF5F5;
        border-radius: 3PX;
        border: 1px solid #FF0C06;
        color: #FF0C06;
        font-size: 12PX;
      }

      .bar {
        width: 4PX;
      }
    }

    .subTitle {
      font-size: 10PX !important;
    }

    .swiper {
      width: 100%;
      height: 640PX;

      .swiper-item {
        width: 100%;
        height: 640PX;
      }

      .benefit {
        width: 100%;
        height: 64PX;

        .qianggou-num {
          padding: 5PX 12PX;
        }
      }

      .cycle {
        width: 27PX;
        height: 27PX;
        border-radius: 5PX;
        background: #FD4442;
      }
    }


    .price {
      font-size: 28PX;
      margin-bottom: -5PX;
    }

    // .coupon {
    //   width: 100%;
    //   height: 45PX;
    //   padding-left: 60PX;
    // }


    .icons {
      width: 14PX;
      height: 14PX;
    }
  }

  .ft12 {
    font-size: 12PX !important;
  }

}

@media screen and (max-width: 640PX) {
  .index {
    .content {
      width: 100%;

      .swiper {
        width: 100vw;
        height: 100vw;

        .swiper-item {
          width: 100vw;
          height: 100vw;
        }
      }
    }

    .ft12 {
      .font(18);
    }

  }

  :deep(.el-form-item__label) {
    font-size: 14PX;
    height: 20PX;
  }
}

:deep(.el-carousel) {
  width: 100%;
  height: 100%;

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-input-number) {
  width: 135PX;
  height: 30PX;

  .el-input-number__decrease, .el-input-number__increase {
    width: 28PX;
    height: 28PX;
    border-radius: 0PX;
  }

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
  }

  .el-icon {
    font-size: 14PX;
  }

}

:deep(.el-input) {
  height: 30PX;

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
    border-radius: 12PX;
    box-shadow: none;
  }


}

:deep(.el-textarea ) {
  height: 60PX !important;

  .el-textarea__inner {
    height: 60PX !important;
    font-size: 12PX;
    box-shadow: none;
    border: 1PX solid #e5e5e5;
    border-radius: 12PX !important;
    padding: 4PX 10PX;
  }

}


:deep(.el-select) {
  height: 30PX !important;

  .el-select__wrapper {
    box-shadow: none;
    border: 1PX solid #e5e5e5;
    border-radius: 12PX !important;
  }

  .el-select__selected-item, .el-input__inner, .el-select__wrapper {
    height: 30PX !important;


  }

  .el-select__placeholder {
    display: flex !important;
    align-content: center;
    align-items: center;
  }

}

:deep(.el-form-item) {
  margin-bottom: 0PX;
  margin-top: 15PX;
  flex-direction: column;
}

:deep(.el-input__wrapper) {
  padding: 0PX 10PX;
  box-shadow: none;
  border: 1PX solid #e5e5e5;
  border-radius: 12PX !important;
  outline: unset;
}

:deep(.el-select__wrapper) {
  padding: 0 10PX;
}

</style>
